 <template>
 	<view>
 		<uni-forms :rules="rules" :value="formData" style=" border: 1px solid #000000;" ref="form"
 			validate-trigger="bind" err-show-type="undertext">
 			<uni-group>
 				<uni-forms-item name="checkmain01" label="检核单号">
 					<uni-easyinput type="text" :inputBorder="true" disabled v-model="formData.checkmain01"
 						style="width: 280px;height: auto;" placeholder="..."></uni-easyinput>
 				</uni-forms-item>


 				<uni-forms-item name="checkmainmodu" v-if="false">
 					<uni-easyinput type="text" :inputBorder="true" disabled
 						v-model="formData.checkmainmodu"></uni-easyinput>
 				</uni-forms-item>
 				<!-- 使用原生input，需要绑定binddata -->
 				<uni-forms-item name="checkmain14" label="不良性质">


 					<uni-easyinput type="text" :inputBorder="true" disabled style="width: 280px;height: auto;"
 						v-model="formData.checkmain14"></uni-easyinput>


 				</uni-forms-item>

 				<uni-forms-item name="checkmain13" v-if="false">


 					<uni-easyinput disabled type="text" :inputBorder="true" style="width: 280px;height: auto;"
 						v-model="formData.checkmain13"></uni-easyinput>


 				</uni-forms-item>


 				<uni-forms-item disabled name="checkmain15" v-if="false">


 					<uni-easyinput disabled type="text" :inputBorder="true"
 						v-model="formData.checkmain15"></uni-easyinput>


 				</uni-forms-item>
 				<uni-forms-item name="checkmain16" disabled label="不良类型">


 					<uni-easyinput type="text" disabled :inputBorder="true" style="width: 280px;height: auto;"
 						v-model="formData.checkmain16"></uni-easyinput>


 				</uni-forms-item>

 				<uni-forms-item name="checkmain22" label="工位">


 					<uni-easyinput style="width: 280px;height: auto;" disabled type="text" :inputBorder="true"
 						v-model="formData.checkmain22"></uni-easyinput>


 				</uni-forms-item> <uni-forms-item name="checkmain23" label="结构">


 					<uni-easyinput disabled type="text" style="width: 280px;height: auto;" :inputBorder="true"
 						v-model="formData.checkmain23"></uni-easyinput>


 				</uni-forms-item>
 				</uni-forms-item> <uni-forms-item name="checkmain17" label="指示书">


 					<uni-easyinput disabled type="textarea" autoHeight :style="textareacss"
 						style="width: 280px; height: auto;color: red;" :inputBorder="true"
 						v-model="formData.checkmain17"></uni-easyinput>


 				</uni-forms-item>
 				<uni-forms-item disabled name="checkmain18" label="检核方法">


 					<uni-easyinput disabled type="textarea" autoHeight :inputBorder="true"
 						style="width: 280px; height: auto;" v-model="formData.checkmain18"></uni-easyinput>


 				</uni-forms-item>
 				<uni-forms-item disabled name="checkmain19" label="检核图">

 					<view>
 						<image style="width: 280px; height: 80px; background-color: #eeeeee;" :src="imageSrc" lazy-load
 							:lazy-load-margin="0" @click="previewImage(imageSrc)" mode="aspectFit"></image>
 					</view>

 				</uni-forms-item>

 				<uni-forms-item name="checkmain20" required label="是否遵守" class="hjlable"
 					label-style="font-weight: 900;">

 					<uni-data-checkbox v-model="formData.checkmain20" :localdata="checkmain20Check" @change="change20"
 						:multiple="false"></uni-data-checkbox>

 				</uni-forms-item>


 				<uni-forms-item name="checkmain21" required v-if="checkmain21Show" label="未遵守原因">

 					<uni-easyinput type="text" :inputBorder="true" v-model="formData.checkmain21"></uni-easyinput>

 				</uni-forms-item>

 			</uni-group>
 			<view><text class="short-page" style="font-size: 39rpx;">\n
 					{{formData.currentPage}}/{{formData.pageSize}}</text>
 			</view>
 			<view>
 				<button class="short-button" type="primary" @click="submitForm('form')">提交</button>
 				<button class="short-button" type="primary" @click="navigateBack()">上一页</button>

 			</view>
 		</uni-forms>
 	</view>
 </template>

 <script>
 	import {
 		queryDetailCheck,
 		submitDetailCheck
 	} from "@/api/gpc/gpc.js"
 	import config from '@/config'


 	const picUrl = config.picUrl
 	export default {
 		data() {

 			return {
 				imageSrc: "https://img.soogif.com/fW8FMFJQnjHPT2d1C7OQd47nM0WGRSME.gif",
 				textareacss: {
 					color: '#ff0000'

 				},
 				name: this.$store.state.user.name,
 				version: getApp().globalData.config.appInfo.version,
 				checkmain21Show: false,
 				checkmain20Check: [{
 					text: '遵守',
 					value: 'Y'
 				}, {
 					text: '未遵守',
 					value: 'N'
 				}, {
 					text: '跳过',
 					value: 'X'
 				}],
 				formData: {
 					currentPage: 1, // 当前页码
 					pageSize: 0,
 					checkmainmodu: this.$store.state.user.name,
 					checkmain01: '',
 					checkmain02: '',
 					checkmain03: '',
 					checkmain04: '',
 					checkmain05: '',
 					checkmain06: '',
 					checkmain07: '',
 					checkmain08: '',
 					checkmain09: '',
 					checkmain10: '',
 					checkmain11: '',
 					checkmain12: '',
 					checkmain13: '',
 					checkmain14: '',
 					checkmain15: '',
 					checkmain16: '',
 					checkmain17: '',
 					checkmain18: '',
 					checkmain19: '',
 					checkmain20: '',
 					checkmain21: '',
 					checkmain22: '',
 					checkmain23: '',
 					checkmain24: '',
 					checkmain25: '',
 					checkmainuser: '',
 					checkmainusername: '',
 					checkmaindate: ''
 				},

 				rules: {
 					checkmain20: {
 						rules: [{
 							required: true,
 							errorMessage: '遵守项必选'
 						}]
 					},
 					checkmain21: {
 						rules: [{
 								required: true,
 								errorMessage: '选择未遵守-》原因必填'
 							},
 							{
 								format: 'String',
 								errorMessage: '必须是字符串'
 							}
 						]
 					},
 				},
 			}
 		},


 		onLoad: function(option) {
 			//let that = this
 			const item = JSON.parse(decodeURIComponent(option.item));
 			this.queryDetailCheck(item)
 		},

 		methods: {
 			previewImage(index) {
 				uni.previewImage({
 					urls: [this.imageSrc],
 					current: 1
 				});
 			},
 			updateDetailCheck() {
 				//let that = this
 				let temppage = this.formData.currentPage + 1
 				if (temppage > this.formData.pageSize) {
 					let form = this.formData
 					let that = this
 					uni.showModal({
 						title: '已经是最后一页',
 						content: '确认保存吗？',
 						success: function(res) {
 							if (res.confirm) {
 								that.submitDetailCheck(form)
 							} else if (res.cancel) {

 							}
 						}
 					});
 				} else {
 					this.formData.currentPage = this.formData.currentPage + 1
 					this.$modal.loading('加载中...');
 					this.queryDetailCheck(this.formData)
 					this.$modal.closeLoading();
 				}



 			},
 			submitDetailCheck(form) {
 				let that = this
 				submitDetailCheck(form).then((data) => {
 					//let that = this
 					that.$modal.msgSuccess('服务器消息：' + data.msg);
 					if (data.code == 200) {
 						setTimeout(function() {
 							that.$tab.reLaunch('/pages/index')
 						}, 2000);

 					}
 				});

 			},


 			async queryDetailCheck(item) {

 				queryDetailCheck(item).then((data) => {
 					//let that = this;
 					if (data.pageSize <= 0) {
 						this.$modal.msgError("无数据，请确认！")
 						return
 					}

 					this.formData = data.data
 					if (!this.isEmpty(this.formData.checkmain20)) {
 						this.formData.checkmain20 = data.data.checkmain20
 						if (this.formData.checkmain20 === 'N') {
 							this.checkmain21Show = true
 						} else {
 							this.checkmain21Show = false
 						}
 					} else {
 						this.checkmain21Show = false
 					}
 					this.formData.pageSize = data.pageSize
 					this.formData.currentPage = data.currentPage
 					this.imageSrc = picUrl + this.formData.checkmain19
 				});
 			},

 			navigateBack() {
 				let temp = this.formData.currentPage - 1
 				if (temp <= 0) {
 					this.$modal.msgError("已经是第一页了！")
 					return
 				}
 				this.formData.currentPage = this.formData.currentPage - 1
 				this.queryDetailCheck(this.formData)
 			},
 			isEmpty(value) {
 				return value === null || value === undefined || value === '' || (Array.isArray(value) && value.length ===
 					0) || (typeof value === 'object' && Object.keys(value).length === 0);
 			},
 			change20(e) {
 				if (e.detail.value === 'N') {
 					this.checkmain21Show = true
 				} else {
 					this.checkmain21Show = false
 				}
 			},


 			submitForm(form) {
 				uni.showLoading({
 					title: '处理中...',
 					mask: true, // 是否显示透明蒙层，防止触摸穿透
 				})

 				if (this.formData.checkmain20 === 'X') {

 					if (this.formData.checkmain24 === 'Y') {
 						this.$modal.msgError("当前项配置不允许跳过，请重新选择！")
 					} else {
 						this.$refs[form]
 							.submit()
 							.then(res => {
 								console.log('表单的值：', res)
 								this.updateDetailCheck()
 							})
 							.catch(errors => {
 								uni.hideLoading()
 								console.error('验证失败：', errors)
 							})
 					}

 				} else {
 					this.$refs[form]
 						.submit()
 						.then(res => {
 							console.log('表单的值：', res)
 							this.updateDetailCheck()
 						})
 						.catch(errors => {
 							uni.hideLoading()
 							console.error('验证失败：', errors)
 						})
 				}
 			},

 			//重置表单 。原生的组件input组件不能重置表单
 			resetForm() {
 				this.$refs.form.resetFields()
 			},


 			clearValidate(form, name) {
 				if (!name) name = []
 				this.$refs[form].clearValidate(name)
 			},
 			handleToEditInfo(formData) {
 				this.$tab.navigateTo('/pages/mine/gpc/detail?item=' + encodeURIComponent(JSON.stringify(formData)))
 			},
 			setValue(name, value) {
 				// 设置表单某项对应得值来触发表单校验
 				// 接受两个参数，第一个参数为表单域的 name ，第二个参数为表单域的值
 				this.$refs.form.setValue(name, value)
 			},
 		}

 	}
 </script>
 <style scoped>
 	.uni-input-border {
 		padding: 0 10px;
 		height: 35px;
 		width: 100%;
 		font-size: 28px;
 		color: #666;
 		border: 1px #e5e5e5 solid;
 		border-radius: 5px;
 		box-sizing: border-box;
 	}

 	::v-deep .is-disabled {
 		color: black !important;
 		font-size: 100%;
 		font-weight: 1000;
 	}

 	.hjlable label {
 		font-weight: 900;
 	}

 	.short-button {
 		width: 100px;
 		// 设置按钮的宽度 
 		margin: 10px;
 		// 按钮与其他元素的外边距 
 		color: #fff;
 		padding: 10rpx 20rpx;
 		border-radius: 5rpx;
 		float: right;
 	}
 </style>